<template>
  <div class="channel-edit">
    <!-- 我的频道 -->
    <van-cell class="channel-edit-title" :border="false">
      <div slot="title" class="title-content">我的频道</div>
      <van-button
        type="danger"
        plain
        size="mini"
        round
        class="edit-btn"
        @click="editBtnChange"
        >{{ this.isEdit ? '确认' : '编辑' }}</van-button
      >
    </van-cell>
    <van-grid :column-num="4" :gutter="10" class="my-grid">
      <van-grid-item
        v-for="(channel, index) in myChannel"
        :key="channel.id"
        :icon="isEdit ? 'clear' : ''"
        class="grid-item"
        @click="chooseOrDel(channel.id, index)"
      >
        <span
          slot="text"
          class="text"
          :class="{ 'channel-active': index === active }"
        >
          {{ channel.name }}
        </span>
      </van-grid-item>
    </van-grid>
    <!-- 我的频道 -->

    <!-- 频道推荐 -->
    <van-cell class="channel-edit-title" :border="false">
      <div slot="title" class="title-content">推荐频道</div>
    </van-cell>
    <van-grid :column-num="4" :gutter="10" class="recommend-grid">
      <van-grid-item
        v-for="channel in getRecommendChannels"
        :key="channel.id"
        :text="channel.name"
        icon="plus"
        class="grid-item"
        @click="addRecommendChannel(channel)"
      />
    </van-grid>
    <!-- 频道推荐 -->
  </div>
</template>

<script>
// 全部频道函数
import { getChannels } from '@/api/index.js'
export default {
  name: 'ChannelEdit',
  data() {
    return {
      isEdit: false,
      allChannelsList: []
    }
  },
  props: {
    myChannel: {
      type: Array,
      required: true
    },
    active: {
      type: Number || String,
      required: true
    }
  },
  methods: {
    // 编辑按钮点击切换函数
    editBtnChange() {
      this.isEdit = !this.isEdit
    },
    // 产出或选择函数
    chooseOrDel(id, index) {
      if (this.isEdit) {
        this.$emit('delOrChoose', id, index, true)
      } else {
        this.$emit('delOrChoose', id, index, false)
      }
    },
    async getAllchannels() {
      try {
        const { data: res } = await getChannels()
        this.allChannelsList = res.data.channels
      } catch (error) {
        this.$toast.fail('获取频道失败')
      }
    },
    // 添加至我的频道
    addRecommendChannel(channel) {
      this.$emit('addRecommendChannel', channel)
    }
  },
  computed: {
    // 计算属性计算出推荐频道
    getRecommendChannels() {
      return this.allChannelsList.filter((channel) => {
        const idFind = this.myChannel.find((item) => item.id === channel.id)
        return !idFind
      })
    }
  },
  created() {
    this.getAllchannels()
  }
}
</script>

<style scoped lang="less">
.channel-edit {
  padding: 75px 0;
  .channel-edit-title {
    .title-content {
      height: 100%;
      font-size: 32px;
    }
    .edit-btn {
      width: 104px;
      height: 48px;
      font-size: 26px;
      color: #f85959;
      border: 1px solid #f85959;
    }
  }
  /deep/.van-icon-clear {
    position: absolute;
    top: 0;
    right: 0;
    transform: translate(50%, -50%);
    font-size: 30px;
    color: #cacaca;

    z-index: 2;
  }
  .channel-active {
    color: tomato !important;
  }
  .grid-item {
    width: 160px;
    height: 86px;
    /deep/.van-grid-item__content {
      background-color: #f4f5f6;
      .van-grid-item__text,
      .text {
        white-space: nowrap;
        font-size: 28px;
        color: #222;
        margin-top: 0;
      }
    }
  }
  .recommend-grid {
    /deep/.van-grid-item__content {
      flex-direction: row;
      .van-icon-plus {
        font-size: 24px;
        margin-right: 6px;
      }
    }
  }
}
</style>
